<form class="form-horizontal" name="endpointGroupForm">
  <!-- name-input -->
  <div class="form-group" ng-class="{ 'has-error': endpointGroupForm.group_name.$invalid }">
    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus />
    </div>
  </div>
  <div class="form-group" ng-show="endpointGroupForm.group_name.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="endpointGroupForm.group_name.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !name-input -->
  <!-- description-input -->
  <div class="form-group">
    <label for="group_description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="group_description" ng-model="$ctrl.model.Description" placeholder="e.g. production environments..." />
    </div>
  </div>
  <!-- !description-input -->
  <div class="col-sm-12 form-section-title"> Metadata </div>
  <!-- tags -->
  <div class="form-group">
    <tag-selector
      ng-if="$ctrl.model && $ctrl.availableTags"
      tags="$ctrl.availableTags"
      model="$ctrl.model.TagIds"
      allow-create="$ctrl.state.allowCreateTag"
      on-create="($ctrl.onCreateTag)"
    ></tag-selector>
  </div>
  <!-- !tags -->
  <!-- environments -->
  <div ng-if="$ctrl.model.Id !== 1">
    <div class="col-sm-12 form-section-title"> Associated environments </div>
    <div class="form-group">
      <div class="col-sm-12 small text-muted">
        You can select which environment should be part of this group by moving them to the associated environments table. Simply click on any environment entry to move it from one
        table to the other.
      </div>
      <div class="col-sm-12" style="margin-top: 20px">
        <!-- available-endpoints -->
        <div class="col-sm-6">
          <div class="text-center small text-muted">Available environments</div>
          <div style="margin-top: 10px">
            <group-association-table
              loaded="$ctrl.loaded"
              page-type="$ctrl.pageType"
              table-type="available"
              retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
              dataset="$ctrl.availableEndpoints"
              entry-click="$ctrl.associateEndpoint"
              pagination-state="$ctrl.state.available"
              empty-dataset-message="No environment available"
            ></group-association-table>
          </div>
        </div>
        <!-- !available-endpoints -->
        <!-- associated-endpoints -->
        <div class="col-sm-6">
          <div class="text-center small text-muted">Associated environments</div>
          <div style="margin-top: 10px">
            <group-association-table
              loaded="$ctrl.loaded"
              page-type="$ctrl.pageType"
              table-type="associated"
              retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
              dataset="$ctrl.associatedEndpoints"
              entry-click="$ctrl.dissociateEndpoint"
              pagination-state="$ctrl.state.associated"
              empty-dataset-message="No associated environment"
              has-backend-pagination="this.pageType !== 'create'"
            ></group-association-table>
          </div>
        </div>
        <!-- !associated-endpoints -->
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.model.Id === 1">
    <div class="col-sm-12 form-section-title"> Unassociated environments </div>
    <div style="margin-top: 10px">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="associated"
        retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
        dataset="$ctrl.associatedEndpoints"
        pagination-state="$ctrl.state.associated"
        empty-dataset-message="No environment available"
      ></group-association-table>
    </div>
  </div>
  <!-- !endpoints -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title"> Actions </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="button"
        class="btn btn-primary btn-sm"
        ng-click="$ctrl.formAction()"
        ng-disabled="$ctrl.actionInProgress || !endpointGroupForm.$valid"
        button-spinner="$ctrl.actionInProgress"
      >
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>
